<template>
  <div class="car-rider">
    <backfather></backfather>
    <div class="center-box">
      <div class="name-box clearfix">
        <div class="icon">
          <img src="../../../static/img/wo@3x.png" alt="">
        </div>
        <input class="input" value="" v-model="name" placeholder="请输入乘车人姓名">
        <div class="mail-list">
          <p class="mail">通讯录</p>
          <div class="icondesc">></div>
        </div>
      </div>
      <div class="phone-box clearfix">
        <div class="icon">
          <img src="../../../static/img/dianhua@3x.png" alt="">
        </div>
        <input class="input" value="" v-model="phone" placeholder="请输入乘车人手机号码" onchange="value=value.replace(^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$)">
      </div>
      <div class="message"></div>
      <div class="history"></div>
      <div class="message-box">
        <p class="title">{{this.title}}</p>
        <p class="history-title">历史乘车人</p>
        <p class="history">{{this.history}}</p>
      </div>
      
    </div>
    <button class="button" @click="sure">确认</button>
  </div>
</template>

<script>
import backfather from 'base/back-father/back-father'

// 引入这个页面需要的方法
import {mapGetters,mapMutations} from 'vuex'
// import axios from 'axios'
export default {
  data () {
    return {
      name: '',
      phone: '',
      title: '请输入有效的真实信息，乘车前司机会电联乘车人',
      history: '自己（1888888888）'
    }
  },
  computed: {
    ...mapGetters([
      'orderName',
      'orderPhone',
      'userName'
    ])
  },
  mounted () {
    this.init()
    this.checkChenke()
  },
  methods: {
    // 判断
    checkChenke () {
      if( this.orderName && this.orderPhone ) {
        this.name = this.orderName
        this.phone = this.orderPhone
      }
    },
    // 用户点击确认的时候触发将数据简单判断后存储
    sure () {
      if (!this.name || !this.phone) {
        this.$createDialog({
          type: 'alert',
          title: '',
          content: '请填写完整信息',
          icon: 'cubeic-alert'
        }).show()
      }else {
        let addName = this.name
        this.setOrderName(addName)
        let addPhone = this.phone
        this.setOrderPhone(addPhone)
        this.$router.push('/index')
      }
    },
    init () {
      if (localStorage.getItem('token') === null) {
        this.$router.push('/login')
        console.log('重定向')
      }
      console.log(localStorage.user+' local')
      console.log(localStorage.phone+' local')
      console.log(this.name+' name')
      this.name = localStorage.user
      this.phone= localStorage.phone
      console.log(localStorage.getItem('token'))
    },
    ...mapMutations({
      setOrderName: 'SET_ORDERNAME',
      setOrderPhone: 'SET_ORDERPHONE',
      setUserName: "SET_USERNAME"
    })
  },
  components: {
    backfather
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
  .car-rider
    width: 100%
    hieght: auto
    min-height: 100vh
    .center-box
      width: 315px
      height: 400px
      margin: 0 auto
      margin-top: 5px
      .name-box
        position: relative
        width: 100%
        height: 44px
        border-bottom: 1px solid rgb(153, 153, 153)
        .mail-list
          position: absolute
          top: 5px
          right: 0
          width: 100px
          height: 34px
          border-left: 1px solid rgb(153, 153, 153)
          .mail
            float left
            margin-top: 8px
            margin-left: 10px
            font-size: 13px
            color: rgb(51, 51, 51)
          .icondesc
            float: right
            margin-top: 8px
            margin-right: 20px
            width: 10px
            height: 10px
      .icon
        position: absolute
        top: 15px
        width: 10px
        height: 10px
        img 
          width 100%
      .input
        float: left
        width: 200px
        height: 14px
        margin-top: 14px
        margin-left: 15px
        font-size: 12px
        outline: none
        color: rgb(153, 153, 153)
      .phone-box
        position: relative
        width: 100%
        height: 44px
        border-bottom: 1px solid rgb(153, 153, 153)
    .message-box
      width: 100%
      height: 112px
      margin-top: 10px
      border-bottom: 1px solid rgb(153, 153, 153)
      .title
        text-align: left
        font-size: 10px
        color: rgb(51, 51, 51)
      .history-title
        font-size: 13px
        color: rgb(51, 51, 51)
        margin-top: 49px
        text-align left
      .history
        font-size: 13px
        color: rgb(153, 153, 153)
        margin-top: 13px
        text-align left
    .button
      position: absolute
      bottom: 20px
      left: 50%
      margin-left: -110px
      width: 220px
      height: 40px
      background-color: #333
      border: none 
      outline: none
      border-radius: 5px
      color: #fff
</style>